<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button>存</button>
  <button>取</button>
  <button>删除</button>
  <button>清空</button>
</body>
<script>
  /*
  localStorage:持久化存储 (如果不清除,就一直在)
  sessionStorage:会话级存储(会话:窗口的打开到关闭就是一次会话)
  localStorage的API方法:
    1.localStorage.setItem('键','值') 存储的语法
    2.localStorage.getItem('键') 获取的语法
    3.localStorage.removeItem('键') 删除的语法
    4.localStorage.clear() 清空的语法
  存储的注意事项:
    值:必须是字符串形式
  */
 let buns= document.querySelectorAll('button')
 let obj={"username":"zs","age":18}
 buns[0].onclick=function(){
  //存储时,值只能是字符串,如果是对象,需要借助JSON转为字符串
  localStorage.setItem('user',JSON.stringify(obj))
 }
 buns[1].onclick=function(){
  //取
   let user=localStorage.getItem('user')
  console.log(JSON.parse(user))//把字符串翟伟json对象
 }
 buns[2].onclick=function(){
  //删除
  localStorage.removeItem('age')
 }
 buns[3].onclick=function(){
  //清除所有
  localStorage.clear()
 }
</script>
</html>